<template>
  <div class="participation-manage">
    <el-card class="box-card">
      <h2>参与记录筛选</h2>
      <el-form :model="searchModel" inline>
        <el-form-item label="用户名称">
          <el-input
            v-model="searchModel.userName"
            placeholder="请输入用户名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="活动名称">
          <el-input
            v-model="searchModel.eventName"
            placeholder="请输入活动名称"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getParticipationList"
            >查询</el-button
          >
          <el-button @click="resetFilters">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <el-table
        :data="participationList"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column prop="userName" label="用户名称" width="150" />
        <el-table-column prop="eventName" label="活动名称" width="150" />
        <el-table-column prop="hours" label="贡献时长（小时）" width="150" />
        <el-table-column prop="createdAt" label="记录时间" width="200" />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button
              type="danger"
              size="mini"
              @click="deleteRecord(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next, sizes, total"
          :total="total"
          :page-size="searchModel.pageSize"
          :current-page="searchModel.pageNo"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>


  
<script>
import participationApi from "@/api/participationManage";

export default {
  data() {
    return {
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 10,
        username: "",
        eventName: "",
      },
      participationList: [],
    };
  },
  mounted() {
    this.getParticipationList();
  },
  methods: {
    resetFilters() {
      this.searchModel = {
        pageNo: 1,
        pageSize: 10,
        username: "",
        eventName: "",
      };
      this.getParticipationList();
    },
    handleSizeChange(newSize) {
      this.searchModel.pageSize = newSize;
      this.searchModel.pageNo = 1;
      this.getParticipationList();
    },
    handleCurrentChange(newPage) {
      this.searchModel.pageNo = newPage;
      this.getParticipationList();
    },
    getParticipationList() {
      participationApi
        .getParticipation(this.searchModel)
        .then((response) => {
          this.total = response.data.total; // total 是记录的总数，应该是一个数字
          this.participationList = response.data.list.map((item) => {
            return {
              ...item,
              createdAt: item.createdAt.replace("T", " "), // 格式化日期
            };
          });
          console.log(this.participationList)
        })
        .catch((error) => {
          console.error("获取参与记录失败", error);
        });
    },
    deleteRecord(record) {
      this.$confirm(
        `确定要删除参与记录 "${record.eventName}" 吗？`,
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          return participationApi.deleteParticipation(record.id); // 假设后端提供的删除接口是 deleteParticipation
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功！",
          });
          this.getParticipationList(); // 重新获取数据
        })
        .catch((error) => {
          if (error !== "cancel") {
            console.error("删除失败", error);
            this.$message.error("删除失败！");
          }
        });
    },
  },
};
</script>


  
  <style scoped>
.participation-manage {
  padding: 20px;
}
.box-card {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
  